<template>
  <a-row>
    <a-col :span="2"> </a-col>
    <a-col :span="15">
      <a-list
        class="comment-list"
        :header="`${Comments.length} 评论`"
        item-layout="horizontal"
        :data-source="Comments"
      >
        <template #renderItem="{ item }">
          <a-list-item>
            <a-comment :author="item.u_name" :avatar="item.u_url">
              <template #actions>
                <span @click="ReplyVisible(item)">回复</span>
              </template>
              <template #author>
                <a>{{ item.u_name }}</a>
              </template>
              <template #avatar>
                <a-avatar :src="item.u_url" alt=" item.u_name " />
              </template>
              <template #content>
                <p>
                  {{ item.in_c_text }}
                </p>
              </template>
              <template #datetime>
                <a-tooltip
                  :title="moment(item.in_c_time).format('YYYY-MM-DD HH:mm:ss')"
                >
                  <span>{{ moment(item.in_c_time).fromNow() }}</span>
                </a-tooltip>
              </template>
              <a-comment v-for="chil in item.children" :key="chil.in_c_sub_id">
                <template #actions>
                  <span @click="ReplyVisible(item, chil.u_name)">回复</span>
                </template>
                <template #author>
                  <a>{{ chil.u_name }}</a>
                </template>
                <template #avatar>
                  <a-avatar :src="chil.u_url" alt="chil.u_name" />
                </template>
                <template #content>
                  <p>
                    {{ chil.in_c_text }}
                  </p>
                </template>
                <template #datetime>
                  <a-tooltip
                    :title="
                      moment(chil.in_c_time).format('YYYY-MM-DD HH:mm:ss')
                    "
                  >
                    <span>{{ moment(chil.in_c_time).fromNow() }}</span>
                  </a-tooltip>
                </template>
              </a-comment>
              <a-comment v-if="item.visible">
                <template #avatar>
                  <a-avatar :src="user.avatar" :alt="user.userName" />
                </template>
                <template #content>
                  <a-form-item :wrapper-col="{ span: 24 }">
                    <a-textarea
                      :rows="4"
                      v-model:value="addReplyParam.in_c_text"
                    />
                  </a-form-item>
                  <a-form-item>
                    <a-button
                      html-type="submit"
                      :loading="submitting1"
                      type="primary"
                      @click="addReply(item.in_c_host_id)"
                    >
                      提交
                    </a-button>
                  </a-form-item>
                </template>
              </a-comment>
            </a-comment>
          </a-list-item>
        </template>
      </a-list>
      <a-comment>
        <template #avatar>
          <a-avatar :src="user.avatar" :alt="user.userName" />
        </template>
        <template #content>
          <a-form-item :wrapper-col="{ span: 15 }">
            <a-textarea :rows="8" v-model:value="addCommentParam.in_c_text" />
          </a-form-item>
          <a-form-item>
            <a-button
              html-type="submit"
              :loading="submitting"
              type="primary"
              @click="addComment"
            >
              提交
            </a-button>
          </a-form-item>
        </template>
      </a-comment>
    </a-col>
  </a-row>
</template>
<script>
import { message } from "ant-design-vue";
import { get, post, tip } from "@/common"; //基础
import moment from "moment";
import {
  LikeFilled,
  LikeOutlined,
  DislikeFilled,
  DislikeOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref, reactive } from "vue";
const data = [
  {
    title: "Ant Design Title 1",
  },
  {
    title: "Ant Design Title 2",
  },
  {
    title: "Ant Design Title 3",
  },
  {
    title: "Ant Design Title 4",
  },
];

export default defineComponent({
  components: {
    LikeFilled,
    LikeOutlined,
    DislikeFilled,
    DislikeOutlined,
  },
  setup() {
    // 当前用户信息
    const user = ref({
      userId: "",
      userName: "",
      avater: "",
    });
    const getCurrnetUser = () => {
      get("/security/home/currentUser").then((res) => {
        user.value = res.data;
      });
    };
    getCurrnetUser();

    // 查看评论
    const Comments = ref([]);
    const getComment = () => {
      post("/forum/inChat/getHostChat", { p_id: 1 }).then((res) => {
        Comments.value = res.data;
        console.log(Comments.value);
      });
    };
    getComment();

    //增加评论
    const submitting = ref(false);
    const addCommentParam = reactive({
      u_id: "",
      p_id: 1,
      in_c_text: "",
    });
    const addComment = () => {
      if (!addCommentParam.in_c_text) {
        message.error("评论不能为空！");
        return;
      }
      addCommentParam.u_id = user.value.userId;
      submitting.value = true;
      post("/forum/inChat/addHostChat", addCommentParam).then((res) => {
        message.success(res.message);
        submitting.value = false;
        addCommentParam.in_c_text = "";
        getComment();
      });
    };

    //增加回复
    const ReplyName = ref();
    const ReplyVisible = (item, name) => {
      item.visible = true;
      ReplyName.value = name;
      if (name != null) {
        addReplyParam.in_c_text = "@" + name + ": ";
      }
    };
    const submitting1 = ref(false);
    const addReplyParam = reactive({
      u_id: "",
      p_id: 1,
      in_c_host_id: undefined,
      in_c_text: "",
    });
    const addReply = (hostId) => {
      if (!addReplyParam.in_c_text) {
        message.error("评论不能为空！");
        return;
      }
      addReplyParam.u_id = user.value.userId;
      addReplyParam.in_c_host_id = hostId;
      console.log(addReplyParam);
      submitting1.value = true;
      post("/forum/inChat/addSubChat", addReplyParam).then((res) => {
        message.success(res.message);
        submitting1.value = false;
        addReplyParam.in_c_text = "";
        getComment();
      });
    };
    return {
      submitting1,
      addReplyParam,
      addReply,
      ReplyName,
      ReplyVisible,
      addComment,
      submitting,
      addCommentParam,
      user,
      getCurrnetUser,
      Comments,
      getComment,
      moment,
    };
  },
});
</script>
<style  scoped>
#components-layout-demo-basic .code-box-demo {
  text-align: center;
}
</style>

